<template>
  <div class="video-container" :style="defaultStyle" :class="isActiveClass">
    <div class="video-content" :style="contentStyle">
      <div class="video-header" v-if="contentData.show_title">
        <div class="video-title" :style="itemStyle">
          {{ contentData.title }}
        </div>
        <div v-if="contentData.show_more" class="video-more">{{ contentData.show_more_text }}</div>
      </div>

      <div class="carousel" v-if="contentData.layout === 'single'">
        <div v-for="(item, index) in contentData.course_detail_list" :key="index">
          <div class="video-wrapper" :style="{ height: computedHeight + 'px' }">
            <img
              :src="item.questionImg || fallbackImg"
              @load="onImageLoad(index, $event)"
              class="img-style"
            />
          </div>
          <div class="video-title-outside" v-if="contentData.text_layout === 'outside'">
            {{ item.questionName }}
          </div>
        </div>
      </div>

      <div class="carousel" v-else-if="contentData.layout === 'carousel'">
        <el-carousel :height="`${computedHeight + 30}px`" indicator-position="none">
          <el-carousel-item v-for="(item, index) in contentData.course_detail_list" :key="index">
            <div class="video-wrapper" :style="{ height: computedHeight + 'px' }">
              <img
                :src="item.questionImg || fallbackImg"
                @load="onImageLoad(index, $event)"
                class="img-style"
              />
            </div>
            <div class="video-title-outside" v-if="contentData.text_layout === 'outside'">
              {{ item.questionName }}
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div v-else-if="contentData.layout === 'grid-2'" class="grid-layout grid-2">
        <div
          class="video-item"
          v-for="(item, index) in contentData.course_detail_list"
          :key="index"
        >
          <div class="video-wrapper" :style="{ height: computedHeight + 'px' }">
            <img
              :src="item.questionImg || fallbackImg"
              @load="onImageLoad(index, $event)"
              class="img-style"
            />
          </div>
          <div class="video-title-outside" v-if="contentData.text_layout === 'outside'">
            {{ item.questionName }}
          </div>
        </div>
      </div>

      <div v-else-if="contentData.layout === 'horizontal-scroll'" class="scroll-layout">
        <div
          class="video-item fixed-width"
          v-for="(item, index) in contentData.course_detail_list"
          :key="index"
        >
          <div class="video-wrapper" :style="{ height: computedHeight + 'px' }">
            <img
              :src="item.questionImg || fallbackImg"
              @load="onImageLoad(index, $event)"
              class="img-style"
            />
          </div>
          <div class="video-title-outside" v-if="contentData.text_layout === 'outside'">
            {{ item.questionName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const fallbackImg = 'https://image.lutongjiakao.com/system/b556ec7ad9fe478b8a14c20ed6f1e50b.png'

  const carouselHeight = ref(200)
  const gridHeight = ref(200)
  const scrollHeight = ref(200)

  const computedHeight = computed(() => {
    const layout = props.contentData.layout
    if (layout === 'grid-2') return gridHeight.value
    if (layout === 'horizontal-scroll') return scrollHeight.value
    return carouselHeight.value
  })

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor,
      overflow: 'hidden'
    }
  })

  const itemStyle = computed(() => {
    const s = props.contentData.itemStyle || {}
    return {
      fontSize: s.fontSize ? s.fontSize + 'px' : '15px',
      color: s.color,
      fontWeight: s.fontWeight
    }
  })

  function onImageLoad(index: number, event: Event) {
    if (index === 0) {
      const img = event.target as HTMLImageElement
      const naturalWidth = img.naturalWidth
      const naturalHeight = img.naturalHeight

      let displayWidth = 375
      if (props.contentData.layout === 'grid-2') displayWidth = 187
      if (props.contentData.layout === 'horizontal-scroll') displayWidth = 200

      const scale = displayWidth / naturalWidth

      if (props.contentData.layout === 'carousel') {
        carouselHeight.value = Math.round(naturalHeight * scale)
      } else if (props.contentData.layout === 'grid-2') {
        gridHeight.value = Math.round(naturalHeight * scale)
      } else if (props.contentData.layout === 'horizontal-scroll') {
        scrollHeight.value = Math.round(naturalHeight * scale)
      }
    }
  }
</script>

<style scoped lang="scss">
  .video-container {
    width: 100%;
    box-sizing: border-box;

    .video-content {
      padding: 12px;
      height: 100%;
    }

    .video-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .video-title {
        font-weight: bold;
      }

      .video-more {
        font-size: 14px;
        color: #999;
      }
    }

    .video-wrapper {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      background: #eee;
    }

    .video-title-outside {
      margin-top: 10px;
      width: 100%;
      height: 30px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      color: black;
    }

    .grid-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .video-item {
        flex-shrink: 0;
        width: calc((100% - 12px) / 2);
      }
    }

    .scroll-layout {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
      gap: 12px;
      padding-bottom: 8px;

      .video-item {
        flex-shrink: 0;
      }

      .fixed-width {
        width: 200px;
      }
    }
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }

  .img-style {
    width: 100%;
    height: 100%;
    text-align: center;
    object-fit: cover;
  }
</style>
